import React,{Component} from 'react'

import {Input,Radio, Button,Form } from 'antd'

import './index.styl'

import {withRouter} from 'react-router-dom';


const RadioGroup = Radio.Group;

const FormItem = Form.Item;



// const Head=(props)=>{
//     return <div className="head">
//                 <span>{props.name}</span>
//             </div>
// }
@withRouter
class step1 extends Component{
    constructor(props){
        super(props)
        this.state={
            value: 1,
            shipname:'',
            shipmubna:'',

        }
        this.handleSubmit=this.handleSubmit.bind(this)
    }

    //input 输入框
    vauleChange(e){
        this.setState({[e.target.name]:  e.target.value})
    }
    onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
          value: e.target.value,
        });
      }
      onChange1(value){
        console.log(value)
      }
      handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
              console.log('Received values of form: ', values);
              this.props.history.push('/addstep02')
            }
          });
      }
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <div className="">
            <Form onSubmit={this.handleSubmit}>
            <FormItem
                label="商品名称"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 5 }}
                >
                {getFieldDecorator('商品名称', {
                    rules: [{ required: true, message: '输入商品名称!' }],
                    
                })(
                    <Input name="shipname" className=""  placeholder="输入商品名称" onChange={(e)=>this.vauleChange(e)}/>
                )}
            </FormItem>
                <div className="form-li">
                    <label> 付款方式</label>
                     <RadioGroup onChange={this.onChange} value={this.state.value}>
                        <Radio value={1}>一次付款</Radio >
                        <Radio value={2}>二次付款</Radio >
                    </RadioGroup>
                </div>
                <FormItem
                label="商品信息模板"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 5 }}
                >
                {getFieldDecorator('商品信息模板', {
                    rules: [{ required: true, message: '输入商品信息模板!' }],
                })(
                    <Input />
                )}
            </FormItem>
                <div className="form-li">
                    <label>商品类目</label>
                    <div className="ship-type">
                        <div className="head">一级类目</div>
                        <div className="con-list">
                            <label className="li">
                                <input type="radio" name="level1" onChange={(id)=>this.onChange1(this)} value="灯具"/>
                                <div>灯具</div>
                            </label>
                            <label className="li">
                                <input type="radio" name="level1" onChange={(id)=>this.onChange1(this)}  value="家具"/>
                                <div>家具</div>
                            </label>
                            <label className="li">
                                <input type="radio" name="level1"/>
                                <div>灯具</div>
                            </label>
                            <label className="li">
                                <input type="radio" name="level1"/>
                                <div>灯具</div>
                            </label>
                        </div>
                    </div>
                    <div className="ship-type">
                        <div className="head">二级类目</div>
                        <div className="con-list">
                            <label className="li">
                                <input type="radio" name="level2"/>
                                <div>灯具</div>
                            </label>
                            <label className="li">
                                <input type="radio" name="level2"/>
                                <div>灯具</div>
                            </label>
                            <label className="li">
                                <input type="radio" name="level2"/>
                                <div>灯具</div>
                            </label>
                            <label className="li">
                                <input type="radio" name="level2"/>
                                <div>灯具</div>
                            </label>
                        </div>
                    </div>
                </div>
                <div className="btn">
                    <Button type="primary" htmlType="submit">下一步</Button>
                </div>
                </Form>
            </div>
        )
    }
}

const WrappedRegistrationForm = Form.create()(step1);

export default WrappedRegistrationForm